<template>
    <fieldset>
        <legend>Fluctuation</legend>
        <button @click="up">上移</button>
        <button @click="down">下移</button>
        <ul>
            <li :class="{ sel: select.includes(index) }" v-for="(item, index) in arr" @click="sel(index)">{{ item.hero
                }}
            </li>
        </ul>
    </fieldset>
</template>
<script>
export default {
    data() {
        return {
            select: [],
            selectIndex: [],
            arr: [
                {
                    id: 1,
                    hero: "李易峰"
                },
                {
                    id: 2,
                    hero: "吴亦凡"
                },
                {
                    id: 3,
                    hero: "黄海波"
                },
                {
                    id: 4,
                    hero: "王力宏"
                },
                {
                    id: 5,
                    hero: "李云迪"
                }
            ]
        }

    },
    methods: {
        //选中的数据
        sel(index) {
            if (this.select.includes(index)) {
                // console.log(index)
                this.select.splice(this.select.indexOf(index), 1)
            } else {
                this.select.push(index)
            }
            // console.log(this.select)
        },
        //上移
        up() {
            //被选中的数组 先进行从小到大排序以免出错
            let select = this.select.sort();
            //整个列表数据对象
            let arr = this.arr;
            // 到顶部
            if (select[0] === 0) {
                alert('已经到顶部了')
                return
            }
            select.forEach((i, index) => {
                arr.splice(i, 1, ...arr.splice(i - 1, 1, arr[i]))
                select[index] = i - 1
            })
        },
        //下移
        down() {
            //下移 按照从大到小的顺序进行排列
            let select = this.select.sort((a, b) => {
                return b - a
            });
            console.log(select)
            //整个列表数据对象
            let arr = this.arr;
            //到底部
            if (select[0] === this.arr.length - 1) {
                alert('到底部了')
                return
            }
            select.forEach((i, index) => {
                arr.splice(i, 1, ...arr.splice(i + 1, 1, arr[i]))
                select[index] = i + 1
            })
        }
    }
}
</script>
<style scoped>
.sel {
    background: aqua;
}

li {
    margin: 5px;
}
button{
    width: 100px;
    margin-right: 10px;
}
</style>